<template>
  <div class="teacerhHome padding20">
    <el-row :gutter="20" style="margin-top:10px">
      <el-col :span='8'>
        <el-card>
          <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
            <div v-for='it in homeList' :key='it.name' class='menuItem' style="" @click='menuClick(it)'>{{it.name}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-calendar v-model="value" class="calendarItem">
          <template slot="dateCell" slot-scope="{ data}">
            <!-- <p style="margin:0px"> -->
            <!-- 没有当前日期，不需要悬浮， -->
            <div>{{ data.day.split('-').slice(2).join() }}<br />
              <div v-if="dayTime.map(i => i.date).includes(data.day)" stylt=''>
                <!-- <div>{{data.day}}</div> -->
                <div v-for='it in dayTime.find(it => it.date == data.day).names' :key='it'>{{it}}</div>
              </div>
            </div>
            <!-- </p> -->
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";

export default {
  name: "testHome",
  data() {
    return {
      homeList: [
        {
          name: "教学管理",
          path: "/exper/views/teacher/teachManager",
        },
        {
          name: "课程申请",
          path: "/exper/views/teacher/courseApply",
        },
        {
          name: "个人信息",
          path: "/exper/views/teacher/personInfo",
        },
      ],
      dayTime: [],
      value: new Date(),
    };
  },
  mounted() {
    this.homeGroupTotal();
  },
  methods: {
    menuClick(item) {
      this.$router.push(item.path);
    },
    async homeGroupTotal() {
      let { data } = await teacherApi.homeGroupTotal();
      this.dayTime = data;
    },
  },
};
</script>
<style lang='less' scoped>
.teacerhHome {
  .menuItem {
    width: 48%;
    background: #f2f2f2;
    margin-bottom: 10px;
    text-align: center;
    height: 104px;
    line-height: 104px;
    cursor: pointer;
  }
}
.eachItem {
  border: 1px solid #ebebeb;
  background: #fff;
  padding: 2px;
  height: 221px;
  .lineItem {
    display: flex;
    margin-top: 52px;
  }
}
.totalThreat /deep/ .el-progress-bar__outer  {
  border-radius: 0;
  background-color: transparent;
}

.totalThreat /deep/ .el-progress-bar__inner  {
  border-radius: 0;
}

/deep/ .el-calendar-table td.is-today {
  background: #facd91;
  color: black;
}
/deep/ .el-calendar-table td.is-selected {
  // background: transparent;
  // background-color: transparent;
}
/deep/ .el-calendar-table .el-calendar-day:hover {
  border: 1px solid #aaa;
  background: transparent;
}
// /deep/ .el-calendar__button-group{
//   display: none;
// }
/deep/ .el-calendar {
  position: relative;
}
/deep/.el-calendar__header .el-calendar__title {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  color: #4e8cda;
}
/deep/.el-calendar__button-group {
  width: 100%;
}
/deep/ .el-button-group {
  display: flex;
  justify-content: space-between;
}
/deep/.el-button-group::after,
/deep/.el-button-group::before {
  content: unset;
}

/deep/ .el-button-group > .el-button:not(:first-child):not(:last-child) {
  // display: none;
  position: absolute;
  right: 35%;
  top: 21px;
}

/deep/.el-button-group > .el-button:first-child:before {
  content: "<";
  font-size: 22px;
}
/deep/ .el-button-group > .el-button:not(:last-child) {
  border: none;
  margin-left: 2%;
}
/deep/ .el-button-group > .el-button:last-child {
  border: none;
  margin-right: 2%;
}
/deep/ .el-button-group > .el-button:last-child:before {
  content: ">";
  font-size: 22px;
  border: none;
}

/deep/.el-button-group > .el-button:first-child span,
/deep/.el-button-group > .el-button:last-child span {
  display: none;
}
</style>
